<template>
  <div class="staff-list">
    <scroll-view class="scroll-view" scroll-y :refresher-triggered="isReloading" @refresherrefresh="refresh" @scrolltolower="loadMore">
      <!--refresher-enabled-->
      <view class="empty" v-if="isEmpty">
        <text>暂无数据</text>
      </view>
      <uni-swipe-action v-if="!isEmpty">
        <!-- 使用插槽 （请自行给定插槽内容宽度）-->
        <uni-swipe-action-item v-for="(data, index) in dataList" :key="index">
          <div class="data-item">
            <div @click="listItemClick(data)">
              <div class="top">
                <div class="img-content"><img mode="widthFix" :src="getImg(data)" /></div>
                <div class="info-content">
                  <div class="name">
                    <p v-text="data.goveName" />
                    <div class="btn-content" v-if="ableComment">
                      <span @click="staffComment(data)">评议</span>
                    </div>
                  </div>
                  <div class="position"><p v-text="data.govePost || ''" /></div>
                  <div class="business more-info" v-if="data.goveEngaged" :class="{ show: data.businessShow }">
                    <p>
                      <span class="key">从事业务：</span>
                      <span v-text="data.goveEngaged" />
                    </p>
                    <uni-icons class="more" type="bottom" size="20" color="#0669f0" @click="showMore(data, index, 'business')" />
                  </div>
                  <div class="business more-info" v-if="data.goveResponsibility" :class="{ show: data.areaShow }">
                    <p>
                      <span class="key">分管领域：</span>
                      <span v-text="data.goveResponsibility" />
                    </p>
                    <uni-icons class="more" type="bottom" size="20" color="#0669f0" @click="showMore(data, index, 'area')" />
                  </div>
                </div>
              </div>
              <div class="bottom">
                <div class="phone" v-if="data.govePhone" @click="makeCall(data)">
                  <i>联系电话：</i>
                  <uni-icons class="phone" type="phone-filled" size="20" color="#0669f0" />
                  <span v-text="data.govePhone" />
                </div>
                <div class="desc more-info" :class="{ show: data.detailShow }" v-if="data.govePosition">
                  <span>岗位职责：</span>
                  <p v-text="data.govePosition" />
                  <uni-icons class="more" type="bottom" size="20" color="#0669f0" @click="showMore(data, index, 'detail')" />
                </div>
              </div>
            </div>
          </div>
        </uni-swipe-action-item>
      </uni-swipe-action>
    </scroll-view>
    <CommentDialog v-if="commentShow" :staffInfo="staffInfo" :deptId="deptId" @close="commentShow = false" @submit="submit" />
  </div>
</template>


<script>
  import CommentDialog from './CommentDialog';
  import { apiUrl } from '../../config/config';
  import { getAppData } from '../../utils/init';
  import { getStaff, checkComment } from '../../api/staff';
  
  export default {
    name: 'StaffList',
    components: {
      CommentDialog,
    },
    props: {
      deptId: {
        type: [ String, Number ],
        default: '',
      },
      keywords: {
        type: [ String, Number ],
        default: '',
      },
      ableComment: {
        type: Boolean,
        default: false,
      },
    },
    data() {
      const appData = getAppData();
      const { userInfo } = appData;
      return {
        isLoading: false,
        isReloading: false,
        isEmpty: false,
        isMore: true,
        dataList: [],
        commentShow: false,
        staffInfo: {},
        userInfo,
        pageData: {
          pageNum: 1,
          pageSize: 10,
        },
      };
    },
    computed: {
      getImg() {
        return (data) => {
          return `${apiUrl}${data.goveImage}`;
        };
      },
    },
    watch: {
      keywords: {
        immediate: true,
        handler() {
          this.dataList = [];
          this.pageData.pageNum = 1;
          this.isMore = true;
          this.isEmpty = false;
          this.getData();
        },
      },
    },
    mounted() {
    },
    created() {
    },
    methods: {
      async getData() {
        const param = {
          deptId: this.deptId,
          goveName: this.keywords,
          ...this.pageData,
        };
        const res = await getStaff(param);
        if (res.code === 200 && res.rows) {
          const dataList = res.rows.map((val) => {
            return {
              ...val,
              detailShow: false,
              businessShow: false,
              areaShow: false,
            };
          });
          this.dataList = [ ...this.dataList, ...dataList ];
          this.isMore = res.total > this.dataList.length;
          this.isEmpty = this.dataList.length < 1;
        }
      },
      loadMore() {
        if (this.isMore && !this.isLoading) {
          this.pageData.pageNum += 1;
          this.getData();
        }
      },
      refresh() {
        console.log('refresh');
      },
      listItemClick(data) {
      },
      async staffComment(data) {
        const { userInfo } = this;
        const param = {
          deptId: this.deptId,
          personId: userInfo.personId,
          goveId: data.goveId,
        };
        const res = await checkComment(param);
        if (res.code === 200) {
          if (res.data && res.data.isComment) {
            this.staffInfo = data;
            this.commentShow = true;
            return;
          }
          if (res.data.reason) {
            const msgObj = {
              title: res.data.title,
              detail: res.data.reason,
            };
            this.$emit('msg', { data: msgObj });
          }
        }
      },
      makeCall(data) {
        uni.makePhoneCall({
          phoneNumber: data.govePhone,
        });
      },
      submit(data) {
        this.$emit('submit', data);
      },
      showMore(data, index, key) {
        data[ `${key}Show` ] = !data[ `${key}Show` ];
        this.$set(this.dataList, index, data);
      },
    },
  };
</script>
<style lang="scss" scoped>
  @import "../../components/common/scroll-view";
  
  .staff-list {
    background-color: white;
    height: 100%;
    overflow: hidden;
    .data-item {
      /*margin-top: 15px;*/
      padding: 0 15px;
      > div {
        padding: 15px;
        background-color: #f1f7fc;
        .top {
          display: flex;
          border-radius: 10px;
          .img-content {
            img {
              display: flex;
              width: 80px;
            }
          }
          .info-content {
            flex: 1;
            margin-left: 15px;
            .name {
              display: flex;
              align-items: center;
              justify-content: space-between;
              p {
                font-size: 16px;
                color: black;
                line-height: 1;
                white-space: nowrap;
                font-weight: 600;
              }
              .btn-content {
                span {
                  background-color: #0669f0;
                  color: white;
                  font-size: 12px;
                  display: block;
                  padding: 5px 20px;
                  line-height: 1;
                  border-radius: 20px;
                }
              }
            }
            .position {
              margin-top: 5px;
              font-size: 12px;
              color: #a3a7ac;
              line-height: 1.5;
            }
            .business {
              font-size: 14px;
              line-height: 1.5;
              margin-top: 5px;
              display: flex;
              .key {
                white-space: nowrap;
              }
            }
          }
        }
        .bottom {
          margin-top: 5px;
          .phone {
            margin-bottom: 5px;
            display: flex;
            align-items: center;
            font-size: 14px;
            span {
              margin-left: 5px;
              line-height: 1;
              display: block;
            }
          }
          .desc {
            span {
              white-space: nowrap;
            }
          }
        }
        .more-info {
          display: flex;
          align-items: start;
          font-size: 14px;
          line-height: 1.5;
          p {
            flex: 1;
            margin-right: 10px;
          }
          .more {
            transition: all 0.2s;
          }
          &.show {
            .more {
              transform: rotateZ(180deg);
            }
          }
          &:not(.show) {
            p {
              overflow: hidden;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 3;
            }
          }
        }
      }
    }
  }
</style>
